import React from 'react'
class Controlled extends React.Component<any, any> {
  constructor(props) {
    super(props)
    this.state = {
      name: '张三',
      info: '信息',
      city: '北京',
      flag: true,
      gender: 'male'
    }
  }
  onInputChange = (e) => {
    this.setState({
      name: e.target.value
    })
  }
  onTextareaChange = (e) => {
    this.setState({
      info: e.target.value
    })
  }
  onSelectChange = (e) => {
    this.setState({
      city: e.target.value
    })
  }
  onCheckboxChange = () => {
    this.setState({
      flag: !this.state.flag
    })
  }
  onRadioChange = (e) => {
    this.setState({
      gender: e.target.value
    })
  }
  render() {
    return (
      <div>
        <div>
          <p>{this.state.name}</p>
          <label htmlFor="inputName">姓名：</label> {/* 用 htmlFor 代替 for */}
          <input id="inputName" value={this.state.name} onChange={this.onInputChange} />
        </div>
        <div>
          <p>{this.state.info}</p>
          <textarea value={this.state.info} onChange={this.onTextareaChange} />
        </div>
        <div>
          <p>{this.state.city}</p>
          <select value={this.state.city} onChange={this.onSelectChange}>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="深圳">深圳</option>
          </select>
        </div>
        <div>
          <p>{this.state.flag.toString()}</p>
          <input type="checkbox" checked={this.state.flag} onChange={this.onCheckboxChange} />
        </div>
        <div>
          <p>{this.state.gender}</p>
          male
          <input
            type="radio"
            name="gender"
            value="male"
            checked={this.state.gender === 'male'}
            onChange={this.onRadioChange}
          />
          female
          <input
            type="radio"
            name="gender"
            value="female"
            checked={this.state.gender === 'female'}
            onChange={this.onRadioChange}
          />
        </div>
      </div>
    )
  }
}
export default Controlled
